<template>
	<view class="modify_phone">
		<view class="current_phone">当前绑定的手机号：{{ info.phone || '' }}</view>
		<view class="bind_phone">
			<view class="phone"><input type="number" data-type="phone" @input="onInput" maxlength="11" placeholder="请输入新的手机号码" /></view>
			<view class="authcode_wraper">
				<input class="authcode" type="number" data-type="authCode" @input="onInput"  maxlength="4" placeholder="请输入验证码" />
				<view class="line"></view>
				<view class="btn_text" @click="getAuthCode">{{ authBtnText }}</view>
			</view>
		</view>
		<view class="btn_wraper" @click="changePhone">
			<image class="btn_icon" src="../../static/images/bdsj_icon_bdsjh.png"></image>
			<view class="btn_text">绑定手机号</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// api
import { $changePhone, $sendCode } from '../../service/index';
// utils
import { myShowToast, myShowModal, verifyPhone } from '../../utils/utils.js';
export default {
	data() {
		return {
			phone: '', // 手机号
			authCode: '', // 验证码
			isLoading: true, // 请求中
			authBtnReady: false, // 能否点击发送验证码按钮
			timeCount: 59, // 获取验证码倒计时 60秒
			timer: 0 // 定时器id
		};
	},
	computed: {
		...mapState(['info']),
		authBtnText() {
			if (this.timer != 0) {
				return `${this.timeCount}s后重新获取`;
			}
			return '获取验证码';
		}
	},
	watch:{
		authCode(val,oldVal){
			if(val.length < 4) {
				this.authBtnReady = false;
			}else{
				this.authBtnReady = true;
			}
		}
	},
	methods: {
		...mapMutations(['cancelRequest', 'updateInfo']),
		// 倒计时 60s
		countDown() {
			this.timer = setInterval(() => {
				this.timeCount--;
				if (this.timeCount <= 0) {
					clearInterval(this.timer);
					this.timer = 0;
					this.timeCount = 59;
				}
			}, 1000);
		},
		// 输入内容
		onInput(e){
			const type = e.currentTarget.dataset.type;
			const value = e.detail.value;
			this[type] = value;
		},
		// 获取验证码
		getAuthCode() {
			if (!this.phone) {
				myShowToast('请先输入手机号');
				return;
			} else if (this.phone && !verifyPhone(this.phone)) {
				myShowToast('手机号码格式不正确');
				return;
			} else if ( this.phone == this.info.phone){
				myShowToast('新手机号码与原手机号相同,无须修改');
				return;
			}
			if (this.timer != 0) {
				return;
			}
			this.countDown(); // 开始倒计时
			this.sendCode(); // 发送验证码
		},
		// 发送验证码
		sendCode(){
			$sendCode()
				.then(res => {
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						return;
					}
					myShowToast("验证码发送成功");
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 修改手机号
		changePhone(){
			if(!this.authBtnReady){
				myShowToast("请先输入4位验证码");
				return;
			}
			$changePhone({
				userPhone:this.phone,
				code:this.authCode
			}).then(res => {
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						return;
					}
					this.updateInfo({phone:this.phone});
					uni.showModal({
					    title: '提示',
					    content: '修改成功',
						showCancel:false,
					    success: (res) => {
					        if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
					        }
					    }
					});
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	onLoad() {
		console.log(this.info);
	},
	onHide() {
		this.timer && clearInterval(this.timer);
	}
};
</script>

<style lang="scss" scoped>
.modify_phone {
	.current_phone {
		padding-left: 40rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(139, 150, 172, 1);
		background-color: #f3f5f9;
	}
	.bind_phone {
		padding: 0 40rpx;
		.phone,
		.authcode_wraper {
			padding: 63rpx 0 30rpx 0;
			border-bottom: 1rpx solid #d1d7e1;
		}
		.authcode_wraper {
			display: flex;
			justify-content: space-between;
			.authcode {
				width: 420rpx;
			}
			.line {
				width: 1rpx;
				height: 60rpx;
				background-color: #d1d7e1;
				position: relative;
				top: -10rpx;
			}
			.btn_text {
				width: 200rpx;
				text-align: right;
				padding-right: 18rpx;
				padding-left: 18rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(36, 101, 255, 1);
			}
		}
	}
	.btn_wraper {
		margin: 47rpx auto;
	}
}
</style>
